<template>
    <div style="height: 80vh">
        <make-unit-dialog :visible="addDialogVisible" @callClosed="handleAddDialogClosed"
                          @calledAddSuccess="handleAddSuccess"/>
        <div class="main-title">计量单位</div>
        <!--    查询输入框和搜索按钮-->
        <el-row justify="space-between">
            <el-col :span="18">
                <el-input v-model="queryParams.name" placeholder="请输入分类名称"
                          style="width: 50%;margin-right: 20px"/>

            </el-col>
            <el-col :span="6">
                <el-button-group>
                    <el-button type="primary" @click="handleQuery">
                        <bar-icon :icon="'select'" :width="15" :height="15" :color="'#ffffff'"/>
                    </el-button>
                    <el-button @click="handleAdd">
                        <bar-icon :icon="'add'" :width="15" :height="15" :color="'#79bbff'"/>
                    </el-button>
                    <el-button type="danger" @click="handleDel" :disabled="selected.length === 0">
                        <bar-icon :icon="'delete'" :width="15" :height="15" :color="'#ffffff'"/>
                    </el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"/>
            <el-table-column label="名称">
                <template #default="scope">
                    <el-input v-model="scope.row.name" :disabled="scope.row.disabled"/>
                </template>
            </el-table-column>
            <el-table-column label="主单位">
                <template #default="scope">
                    <!--                    下拉菜单，提供是和否两个选项-->
                    <el-select v-model="scope.row.mainUnit" :disabled="scope.row.disabled">
                        <el-option label="是" value="1"/>
                        <el-option label="否" value="0"/>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    <template v-if="scope.row.status === 1">
                        <el-tag type="success">启用</el-tag>
                    </template>
                    <template v-if="scope.row.status === 0">
                        <el-tag type="danger">已弃用</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="备注">
                <template #default="scope">
                    <el-input v-model="scope.row.comments" :disabled="scope.row.disabled"/>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text" @click="handleUpdate(scope.row)">{{
                        scope.row.disabled ? scope.row.status === 0 ? '恢复' : '修改' : '保存'
                        }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block">
            <el-pagination layout="prev, pager, next" :pager-count="7" :total="total" @change="handleChanged"/>
        </div>
    </div>
</template>

<script>
import unitAPI from "@/util/request-md/unit/unit.js"
import BarIcon from "@/components/widget/icon/BarIcon.vue";
import MakeUnitDialog from "@/components/widget/dialog/MakeUnitDialog.vue";

export default {
    name: 'unit.vue',
    components: {MakeUnitDialog, BarIcon},
    data() {
        return {
            localData: [],
            tableData: [],
            total: 0,
            addDialogVisible: false,
            queryParams: {
                name: '',
                idUnit: '',
                page: 1,
                limit: 12
            },
            selected: []
        }
    },
    methods: {
        loadUtilInfo() {
            unitAPI.getALl(this.queryParams, (res) => {
                if (res.code === 200) {
                    this.localData = res.data;
                    this.assemblyData();

                } else {
                    this.$message.error("获取单位信息失败:" + res.code);
                }
            });
        },
        handleQuery() {
            unitAPI.findByName(this.queryParams, (res) => {
                if (res.code === 200) {
                    this.localData = res.data;
                    this.assemblyData();

                } else {
                    this.$message.error("查询异常:" + res.code);
                }
            })
        },
        handleAdd() {
            console.log("点击了")
            this.addDialogVisible = true;
        },
        assemblyData() {
            this.tableData = [];
            this.localData = this.localData.map(item => {
                this.tableData.push({
                    ...item, disabled: true
                })
            })
            unitAPI.getCount((res)=>{
                if (res.code === 200){
                    this.total = res.data;
                }
            });
        },
        handleAddDialogClosed() {
            this.addDialogVisible = false;
        },
        handleAddSuccess() {
            this.loadUtilInfo();
            this.addDialogVisible = false;

        },
        handleChanged(current, size) {
            console.log(current, ">>>>current")
            console.log(size, ">>>>size")
            this.queryParams.page = current;
            unitAPI.getALl(this.queryParams, (res) => {
                if (res.code === 200) {
                    this.localData = res.data;
                    this.assemblyData();
                } else {
                    this.$message.error("获取单位信息失败:" + res.code);
                }
            });
        },
        handleUpdate(data) {
            if(data.status === 0){
                data.status = 1;
                unitAPI.update(data, (res) => {
                    if (res.code === 200) {
                        this.$message.success("恢复成功");
                        // this.loadUtilInfo();
                    } else {
                        this.$message.error("恢复失败"+res.code);
                    }
                })
                return;
            }
            if (!data.disabled) {
                unitAPI.update(data, (res) => {
                    if (res.code === 200) {
                        this.$message.success("修改成功");
                        // this.loadUtilInfo();
                    } else {
                        this.$message.error("修改失败");
                    }
                })
            }
            data.disabled = !data.disabled;

        },
        handleSelectionChange(data) {
            //查看data中有没有stockStatus === -1 的
            for (let i = 0; i < data.length; i++) {
                if (data[i].status === 0) {
                    this.$message.error("注意！您选的数据中有不可用数据，请重新选择");
                    return;
                }
            }
            this.selected = data;
        },
        //删除
        handleDel() {
            for (let i = 0; i < this.selected.length; i++) {
                unitAPI.delete({id: this.selected[i].idUnit, status: 0}, (res) => {
                    if (res.code === 200) {
                        this.$message.success("删除成功");
                        this.loadUtilInfo();
                    } else {
                        this.$message.error("删除失败");
                    }
                })
            }
            this.loadUtilInfo();

        }
    },
    mounted() {
        this.loadUtilInfo();
    }
}
</script>

<style>
.pagination-block {
    position: absolute;
    display: block;
    bottom: 5px;
}
</style>